<template>
  <view class="goods-list flex-box-page">
    <u-navbar :autoBack="true" :placeholder="true">
      <view class="search" slot="center">
        <u-search :showAction="false" placeholder="请输入关键字" v-model="query.keyword" @search="getList"></u-search>
      </view>
    </u-navbar>
    <FilterSelector :data="filterList" @change="filterChange"></FilterSelector>
    <view class="safe-box app-bg">
      <GoodsList :list="list" :status="status" @scrolltolower="scrolltolower"></GoodsList>
    </view>
  </view>

</template>

<script>
  import FilterSelector from './components/filter-selector.vue'
  export default {
    components: {
      FilterSelector,
    },
    data() {
      return {
        status: 'loadmore',
        query: {
          index: 1,
          size: 20,
          category: '',
          keyword: '',
          sortName: '',
          sort: ''
        },
        list: []
      }
    },
    computed: {
      filterList: function() {
        return (
          {
            price: [{
                name: '默认排序',
                sort: null
              },
              {
                name: '价格高到低',
                sort: -1
              },
              {
                name: '价格低到高',
                sort: 1
              }
            ]
          }
        )
      }
    },
    methods: {
      async getList(reset) {
        if (reset) this.list = []
        const res = await this.$http.get(`/fan/goods`, this.query)
        console.log(res)
        this.list = [...this.list, ...res.data.records]
        this.status = res.data.records.length < this.query.size ? 'nomore' : 'loadmore'
      },
      scrolltolower() {
        this.$loadMore(this)
      },
      filterChange(data2) {
        console.log(data2)
        const { key, index, data } = data2
        this.query.sortName = key
        this.query.sort = data.sort
        this.getList(true)
      },
    },
    onLoad(e) {
      if (e.category) {
        this.query.category = e.category
      } else if (e.keyword) {
        this.query.keyword = e.keyword
      }
      this.getList()
    }
  }
</script>

<style lang="scss" scoped>
  .goods-list {}

  .item {
    width: 48%;
  }

  .search {
    /* #ifdef MP-WEIXIN */
    margin-left: -150rpx;
    /* #endif */
    /* #ifdef APP-PLUS || H5 */
    width: 520rpx;
    /* #endif */
  }
</style>
